<!-- 退款详情 -->
<template>
  <view class="container">
    <view class="content_box" v-if="refundDetail">
      <!-- 步骤条 -->
      <view class="steps-box ss-flex">
        <view class="ss-flex">
          <view class="steps-item" v-for="(item, index) in stepsList" :key="index">
            <view class="ss-flex">
              <text
                class="sicon-circleclose"
                v-if="stepsList.length - 1 === index && [61, 62, 63].includes(refundDetail.status)"
              />
              <text
                class="sicon-circlecheck"
                v-else
                :class="activeStep >= index ? 'activity-color' : 'info-color'"
              />

              <view
                v-if="stepsList.length - 1 !== index"
                class="line"
                :class="activeStep >= index ? 'activity-bg' : 'info-bg'"
              />
            </view>
            <view
              class="steps-item-title"
              :class="activeStep >= index ? 'activity-color' : 'info-color'"
            >
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>

      <!-- 服务状态 -->
      <view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20">
        <view class="">
          <view class="status-text">
            {{ getRefundStatusText(refundDetail.status) }}
          </view>
          <view class="status-time">
            {{ formatTime(refundDetail.updateTime) }}
          </view>
        </view>
        <text class="ss-iconfont _icon-forward" style="color: #666" />
      </view>

      <!-- 退款金额 -->
      <view class="aftersale-money ss-flex ss-col-center ss-row-between">
        <view class="aftersale-money--title">退款总额</view>
        <view class="aftersale-money--num">￥{{ (refundDetail.refundPrice / 100).toFixed(2) }}</view>
      </view>

      <!-- 服务商品 -->
      <view class="order-shop">
        <view class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white">
          <view class="img-box ss-m-r-24">
            <image class="order-img" :src="refundDetail.picUrl" mode="aspectFill"></image>
          </view>
          <view class="box-right ss-flex-col ss-row-between">
            <view class="title-text ss-line-2">{{ refundDetail.spuName }}</view>
            <view v-if="refundDetail.properties && refundDetail.properties.length > 0" class="spec-text ss-m-t-8 ss-m-b-12">
              {{ refundDetail.properties.map(property => property.valueName).join(' ') }}
            </view>
            <view class="ss-flex">
              <view class="ss-flex ss-col-center">
                <view class="price-text ss-flex ss-col-center" style="color: #ff3000;">
                  ￥{{ (refundDetail.refundPrice / 100).toFixed(2) }}
                </view>
                <view v-if="refundDetail.count" class="total-text ss-flex ss-col-center">x {{ refundDetail.count }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务内容 -->
      <view class="aftersale-content">
        <view class="aftersale-item ss-flex ss-col-center">
          <view class="item-title">服务单号：</view>
          <view class="item-content ss-m-r-16">{{ refundDetail.no }}</view>
          <view class="tui-copy-btn" @click="onCopy">
            复制
          </view>
        </view>
        <view class="aftersale-item ss-flex ss-col-center">
          <view class="item-title">申请时间：</view>
          <view class="item-content">
            {{ formatTime(refundDetail.createTime) }}
          </view>
        </view>
        <view class="aftersale-item ss-flex ss-col-center">
          <view class="item-title">售后类型：</view>
          <view class="item-content">{{ refundDetail.way === 10 ? '仅退款' : '退款退货' }}</view>
        </view>
        <view class="aftersale-item ss-flex ss-col-center">
          <view class="item-title">申请原因：</view>
          <view class="item-content">{{ refundDetail.applyReason }}</view>
        </view>
        <view class="aftersale-item ss-flex ss-col-center">
          <view class="item-title">相关描述：</view>
          <view class="item-content">{{ refundDetail.applyDescription }}</view>
        </view>
      </view>
    </view>

    <!-- 操作区 -->
    <view v-if="!refundDetail" class="empty-box">
      <view class="empty-text">暂无该订单售后详情</view>
    </view>
    
    <view class="foot_box" v-if="refundDetail">
      <tui-button
        v-if="refundDetail.status === 10"
        type="gray"
        width="160rpx"
        height="60rpx"
        size="24"
        shape="circle"
        @click="cancelRefund"
      >
        取消申请
      </tui-button>
      <tui-button
        type="danger"
        width="160rpx"
        height="60rpx"
        size="24"
        shape="circle"
        @click="contactService"
      >
        联系客服
      </tui-button>
    </view>
  </view>
</template>

<script>
import tuiButton from '@/components/thorui/tui-button/tui-button.vue'

export default {
  components: {
    tuiButton
  },
  data() {
    return {
      refundDetail: null,
      refundId: null,
      activeStep: 0,
      stepsList: [
        { title: '提交申请' },
        { title: '处理中' },
        { title: '完成' }
      ]
    };
  },
  methods: {
    // 获取退款详情
    fetchRefundDetail() {
      // 如果是测试模式，直接使用测试数据
      if (this.refundId === 'test') {
        this.loadTestData();
        return;
      }
      
      this.$api
        .getRefundDetail(this.refundId)
        .then((res) => {
          if (res.code === 0) {
            this.refundDetail = res.data;
            this.updateSteps();
          } else {
            uni.showToast({
              title: res.msg || "加载失败",
              icon: "none"
            });
          }
        })
        .catch(() => {
          uni.showToast({
            title: "加载失败，请重试",
            icon: "none"
          });
        });
    },
    // 加载测试数据
    loadTestData() {
      this.refundDetail = {
        "id": 26,
        "no": "r202510251938051",
        "status": 50,
        "way": 10,
        "type": 20,
        "applyReason": "不想要了",
        "applyDescription": "",
        "applyPicUrls": null,
        "createTime": 1761392286000,
        "updateTime": 1761392286000,
        "orderId": 311,
        "orderNo": "o202510251832081",
        "orderItemId": 308,
        "spuId": 645,
        "spuName": "测试商品0.01",
        "skuId": 40,
        "properties": [{"propertyId": 0, "propertyName": "默认", "valueId": 0, "valueName": "默认"}],
        "picUrl": "https://cdn1.sanyedu.com/ea67286d8c7a8d663f3d85e9ee4faac7b3b3108f48aee09eab8c6a0d78cb2080.gif",
        "count": 1,
        "auditReason": null,
        "refundPrice": 1,
        "refundTime": 1761392285000,
        "logisticsId": null,
        "logisticsNo": null,
        "deliveryTime": null,
        "receiveTime": null,
        "receiveReason": null
      };
      this.updateSteps();
    },
    // 更新步骤条
    updateSteps() {
      if (!this.refundDetail) return;
      
      if ([10].includes(this.refundDetail.status)) {
        this.activeStep = 0;
      } else if ([20, 30].includes(this.refundDetail.status)) {
        this.activeStep = 1;
      } else if ([40, 50].includes(this.refundDetail.status)) {
        this.activeStep = 2;
      } else if ([61, 62, 63].includes(this.refundDetail.status)) {
        this.activeStep = 2;
      }
    },
    // 取消退款申请
    cancelRefund() {
      uni.showModal({
        title: "提示",
        content: "确定要取消此申请吗？",
        success: (res) => {
          if (res.confirm) {
            this.$api
              .cancelRefund(this.refundId)
              .then((res) => {
                if (res.code === 0) {
                  uni.showToast({
                    title: "取消成功",
                    icon: "success"
                  });
                  this.fetchRefundDetail();
                } else {
                  uni.showToast({
                    title: res.msg || "取消失败",
                    icon: "none"
                  });
                }
              })
              .catch(() => {
                uni.showToast({
                  title: "取消失败，请重试",
                  icon: "none"
                });
              });
          }
        }
      });
    },
    // 联系客服
    contactService() {
      // 组装首条消息，带上退款订单信息
      const preset = encodeURIComponent(
        `退款咨询：订单号${this.refundDetail.orderNo || ''}，服务单号${this.refundDetail.no || ''}`
      );
      const avatar = encodeURIComponent('/static/img/tabs/my.png');
      const userName = encodeURIComponent('客服');
      
      // 跳转到聊天页面，并携带预置消息
      uni.navigateTo({
        url: `/subPackage2/chat/chat?preset=${preset}&userName=${userName}&userAvatar=${avatar}&type=refund&orderNo=${this.refundDetail.orderNo || ''}&refundNo=${this.refundDetail.no || ''}`,
        fail: () => {
          uni.showToast({
            title: "聊天功能暂不可用",
            icon: "none"
          });
        }
      });
    },
    // 复制
    onCopy() {
      uni.setClipboardData({
        data: this.refundDetail.no,
        success: () => {
          uni.showToast({
            title: "复制成功",
            icon: "success"
          });
        }
      });
    },
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp || timestamp === undefined || timestamp === null) return '';
      
      // 处理时间戳（可能是秒或毫秒）
      let time = timestamp;
      if (timestamp < 10000000000) { // 如果是秒级时间戳
        time = timestamp * 1000;
      }
      
      const date = new Date(time);
      if (isNaN(date.getTime())) return '';
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 获取退款状态文本
    getRefundStatusText(status) {
      const statusMap = {
        10: "退款申请待商家处理",
        20: "请退货并填写物流信息",
        30: "退货退款申请待商家处理",
        40: "等待退款",
        50: "退款成功",
        61: "退款关闭",
        62: "商家不同意退款申请",
        63: "商家拒绝收货，不同意退款"
      };
      return statusMap[status] || "未知状态";
    }
  },
  onLoad(options) {
    if (options.id) {
      this.refundId = options.id;
      this.fetchRefundDetail();
    } else {
      // 如果没有传入ID，直接加载测试数据
      this.refundId = 'test';
      this.loadTestData();
    }
  }
};
</script>

<style>
@font-face {
  font-family: 'sheepicon';
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
    format('woff2');
}

[class*='sicon-'] {
  font-family: 'sheepicon';
  display: inline-block;
}

.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.content_box {
  padding-bottom: 120rpx;
}

/* 步骤条 */
.steps-box {
  width: 100%;
  height: 190rpx;
  background: linear-gradient(90deg, #E41F19, #ff6b6b);
  padding-left: 72rpx;
}

.steps-item .sicon-circleclose {
  font-size: 24rpx;
  color: #fff;
}

.steps-item .sicon-circlecheck {
  font-size: 24rpx;
}

.sicon-circlecheck:before {
  content: '\e701';
}

.sicon-circleclose:before {
  content: '\e702';
}

.steps-item-title {
  font-size: 24rpx;
  font-weight: 400;
  margin-top: 16rpx;
  margin-left: -36rpx;
  width: 100rpx;
  text-align: center;
}

.activity-color {
  color: #fff;
}

.info-color {
  color: rgba(255, 255, 255, 0.4);
}

.activity-bg {
  background: #fff;
}

.info-bg {
  background: rgba(255, 255, 255, 0.4);
}

.line {
  width: 270rpx;
  height: 4rpx;
  /* margin-top: 10rpx; */
}

/* 服务状态 */
.status-box {
  position: relative;
  z-index: 3;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0px 0px;
  padding: 20rpx;
  margin-top: -20rpx;
}

.status-text {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 20rpx;
}

.status-time {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}

/* 退款金额 */
.aftersale-money {
  background-color: #fff;
  height: 98rpx;
  padding: 0 20rpx;
  margin: 20rpx;
}

.aftersale-money--title {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.aftersale-money--num {
  font-size: 28rpx;
  font-family: OPPOSANS;
  font-weight: 500;
  color: #ff3000;
}

/* order-shop */
.order-shop {
  padding: 20rpx;
  background-color: #fff;
  margin: 0 20rpx 20rpx 20rpx;
}

.ss-order-card-warp {
  padding: 20rpx;
}

.img-box {
  width: 164rpx;
  height: 164rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.order-img {
  width: 164rpx;
  height: 164rpx;
}

.box-right {
  flex: 1;
  position: relative;
}

.title-text {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 40rpx;
}

.spec-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #999;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.price-text {
  font-size: 24rpx;
  font-weight: 500;
  font-family: OPPOSANS;
}

.total-text {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

/* 服务内容 */
.aftersale-content {
  background-color: #fff;
  padding: 20rpx;
  margin: 0 20rpx;
}

.aftersale-item {
  height: 60rpx;
}


.item-title {
  color: #999;
  font-size: 28rpx;
}

.item-content {
  color: #333;
  font-size: 28rpx;
}

/* 底部功能 */
.foot_box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  gap: 20rpx;
}


.empty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400rpx;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

/* 工具类 */
.ss-flex {
  display: flex;
  align-items: center;
}

.ss-col-center {
  align-items: center;
}

.ss-row-between {
  justify-content: space-between;
}

.ss-col-stretch {
  align-items: stretch;
}

.ss-m-x-20 {
  margin: 0 20rpx;
}

.ss-m-r-16 {
  margin-right: 16rpx;
}

.ss-m-r-24 {
  margin-right: 24rpx;
}

.ss-m-t-8 {
  margin-top: 8rpx;
}

.ss-m-b-12 {
  margin-bottom: 12rpx;
}

.ss-line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.bg-white {
  background-color: #fff;
}

/* 复制按钮统一样式 - 与参考页面完全一致 */
.tui-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12rpx;
  background: #eeeeee;
  border-radius: 20rpx;
  border: 1rpx solid #E41F19;
  width: 75rpx;
  height: 40rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #333;
  padding: 0;
  box-sizing: border-box;
}

.tui-copy-btn:active {
  opacity: 0.7;
  background: #e0e0e0;
}

</style>